<template>
  <div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">{{ $t('m.common.button.add') }}</a-button>
      <a-button @click="batchDel" type="default"  icon="delete">{{ $t('m.common.button.delete') }}</a-button>
      <a-button v-if="dataSource.length == 0" @click="handleInitRoot" type="default" icon="plus">{{$t('m.system.permission.other.init_root_menu')}}</a-button>
    </div>

    <!-- table区域-begin -->
    <a-table
      :columns="columns"
      size="middle"
      :pagination="false"
      :dataSource="dataSource"
      :loading="loading"
      :expandedRowKeys="expandedRowKeys"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @expandedRowsChange="handleExpandedRowsChange">
      <span slot="menuNameSlot" slot-scope="text, record">
        <ych-icon v-if="record.icon" :type="record.icon" :style="{ fontSize: '15px',marginTop:'0px' }"/>
        <span style="margin-left: 4px;">{{ text }}</span>
      </span>
      <span slot="sortSlot" slot-scope="text">
          <a-tag style="width:50px;">
            {{ text }}
          </a-tag>
      </span>
      <span slot="groupMenuSlot" slot-scope="text">
          <a-tag style="width:50px;" :color="text | groupMenuFilter">
            {{ groupMenuFormat(text) }}
          </a-tag>
      </span>
      <span slot="menuTypeSlot" slot-scope="text" color="blue">
          <a-tag :color="text | menuTypeFilter">
            {{ menuTypeFormat(text) }}
          </a-tag>
      </span>

      <template slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">{{ $t('m.common.button.update') }}</a>
        <a-divider type="vertical" />
        <a  @click="handleAddSub(record)">{{$t('m.system.permission.other.add_sub')}}</a>
        <a-divider type="vertical" v-show="record.topFlag=='0'"/>
        <a-popconfirm v-show="record.topFlag=='0'" :title="$t('m.common.tip.delete_confirm')" @confirm="() => handleDelete(record.id)">
          <a>{{ $t('m.common.button.delete') }}</a>
        </a-popconfirm>
        <a-divider type="vertical"/>
        <a @click="handleDataRule(record)">{{$t('m.system.permission.other.data_rule')}}</a>
      </template>

      </a-table>
    <!-- table区域-end -->

    <act-app-permission-modal :category="category" :groupId="groupId" ref="modalForm" @ok="modalFormOk"></act-app-permission-modal>
    <permission-data-rule-list ref="PermissionDataRuleList" @ok="modalFormOk"></permission-data-rule-list>
  </div>
</template>

<script>

  import ActAppPermissionModal from './modules/ActAppPermissionModal'
  import { getAction, postAction } from '@/api/manage'
  import { YcListMixin } from '@/mixins/YcListMixin'
  import PermissionDataRuleList from '../system/PermissionDataRuleList'
  import YchConstant from "@/api/YchConstant";


  export default {
    name: 'ActAppPermissionList',
    mixins: [YcListMixin],
    components: {
      PermissionDataRuleList,
      ActAppPermissionModal,
    },
    props:{
      category:{
        type:String
      },
      groupId:{
        type:String
      }
    },
    data() {
      return {
        // 表头
        columns: [
          {
            title:this.$t('m.system.permission.entity.name'),
            dataIndex: 'name',
            key: 'name',
            width: 210,
            ellipsis: true,
            scopedSlots: { customRender: 'menuNameSlot' }
          }, {
            title: this.$t('m.system.permission.entity.menuType'),
            dataIndex: 'menuType',
            key: 'menuType',
            width: 120,
            align: 'center',
            scopedSlots: { customRender: 'menuTypeSlot' },
          },
          {
            title: this.$t('m.system.permission.entity.sortNo'),
            dataIndex: 'sortNo',
            key: 'sortNo',
            width: 80,
            align: 'center',
            scopedSlots: { customRender: 'sortSlot' }
          },
          {
            title: this.$t('m.system.permission.entity.groupId'),
            dataIndex: 'groupId',
            key: 'groupId',
            width: 100,
            align: 'center',
            scopedSlots: { customRender: 'groupMenuSlot' },
          },
          {
            title: this.$t('m.system.permission.entity.component'),
            dataIndex: 'component',
            key: 'component',
            ellipsis: true,
          },
          {
            title: this.$t('m.system.permission.entity.url'),
            dataIndex: 'url',
            key: 'url',
            ellipsis: true,
          },

          {
            title: this.$t('m.common.label.operate'),
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            align: 'center',
            width: 300
          }
        ],
        loading: false,
        // 展开的行，受控属性
        expandedRowKeys: [],
        url: {
          list: YchConstant.PREFIX_SYSTEM + '/permission/listAppMenu',
          delete: YchConstant.PREFIX_SYSTEM + '/permission/delete',
          deleteBatch: YchConstant.PREFIX_SYSTEM + '/permission/deleteBatch',
          createRootPermissionByGroup: YchConstant.PREFIX_EFORM + '/manage/actAppGroup/createRootPermissionByGroup',
        },
        // 查询条件
        queryParam: {
          category:this.category,
          groupId:this.groupId
        },
      }
    },
    filters: {
      menuTypeFilter (type) {
        let value = '#108ee9'
        if (type === 0) {
          value = '#2db7f5'
        } else if (type === 1) {
          value = '#87d068'
        }
        return value
      },
      groupMenuFilter (text) {
        let value = '#2db7f5'
        if (text) {
          value = '#2db7f5'
        } else{
          value = '#87d068'
        }
        return value
      }
    },
    methods: {
      loadData() {
        let queryParam = {category:this.category,groupId:this.groupId};
        getAction(this.url.list,queryParam).then((res) => {
          if (res.success) {
            this.dataSource = res.result
          }
        })
      },
      // 打开数据规则编辑
      handleDataRule(record) {
        this.$refs.PermissionDataRuleList.edit(record)
      },
      handleAddSub(record) {
        this.$refs.modalForm.title =  this.$t('m.system.permission.other.add_sub_label')
        this.$refs.modalForm.localMenuType = 1;
        this.$refs.modalForm.disableSubmit = false;
        this.$refs.modalForm.edit({
          status: '1',
          permsType: '1',
          route: true,
          keepAlive: true,
          'parentId': record.id,
          category: this.category,
          groupId: this.groupId,
          menuType: 1
        });
      },
      handleExpandedRowsChange(expandedRows) {
        this.expandedRowKeys = expandedRows
      },
      groupMenuFormat(text){
        return text ? this.$t('m.common.label.yes') : this.$t('m.common.label.no');
      },
      menuTypeFormat(text){
        if (text == 0) {
          return this.$t('m.system.permission.other.permission_type1')
        } else if (text == 1) {
          return this.$t('m.system.permission.other.permission_type2')
        } else if (text == 2) {
          return this.$t('m.system.permission.other.permission_type3')
        } else {
          return text
        }
      },
      handleInitRoot() {
        postAction(this.url.createRootPermissionByGroup + "?groupId=" + this.groupId).then((res) => {
          if (res.success) {
            this.loadData();
          } else {
            this.messageUtil.warning(res.message)
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
</style>
